'use strict';
define(['jquery','angular'],function($,angular){
	angular.module('app.echarts', [])	
	
	//百度echarts自定义指令,包含常用的图表组件 折 柱 饼 散点 图例 工具栏 标注/线/域 数据区域缩放
	.directive("u2EchartsCommon",['$http', function($http){
		return {
			restrict:'EA',
			scope: {
				optionData: '@'
//			    ,params: '@'
			},
			template: '<div style="border: 1px solid ; width: auto; height: 300px;">数据加载中......</div>',
			//,templateUrl:'/usercenter/home/_lefter.jsp'
			replace:true,
//		    transclude: false,    // 不复制原始HTML内容 
			controller:['$scope', function($scope){
//				this.name='我是指令中的控制器！';
//				console.log('this.name-->',this.name);
//				console.log('$scope.params-->',$scope.params);
				var vm = this;
				return vm;
			 }],
			link:function(scope,element,attrs){
				/*
				 * (dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
					    devicePixelRatio?: number
					    renderer?: string
					    width?: number|string
					    height? number|string
					})
				 */
				 require(['echartsCommon'],function (echarts) {
//						console.log('echarts-->',echarts);
						//初始化组件
						var myChart = echarts.init(element[0]);  
						//工具箱中的还原事件
						/*
						myChart.on('restore',function(){
							scope.getData();
						});
						*/
					    //监听窗口resize
					    window.addEventListener('resize',function(){
					    	myChart.resize();
					    });
						//初始化组件
//						var myChart = echarts.init(element[0],null,{width:100,height:100});  
//						console.log('scope.optionData-->',scope.optionData);
						//加载数据
						if(scope.optionData){
							//使用图表
						    myChart.setOption(JSON.parse(scope.optionData), true);  
//						    myChart.setOption(scope.optionData, true);  
						}else{
//							console.log('scope.optionData-->',scope.optionData);
						}
						
						//监视改变
						scope.$watch('optionData',function(newValue,oldValue,scope){
//							console.log('newValue-->',newValue);
//							console.log('oldValue-->',oldValue);
							if(scope.optionData){
								//使用图表
							    myChart.setOption(JSON.parse(scope.optionData), true);  
//							    myChart.setOption(scope.optionData, true);  
							}else{
//								console.log('scope.optionData-->',scope.optionData);
							}
							
						},true);
			      
				 });//require结束
			}//link结束
		}//return结束
	}])//指令定义结束
});//define结束

